/**
 * @description 订单卡片组件 - Yuanr
 * @param {array} imgList - 图片集（目前仅为图片url的连接）
 * @param {string} orderId - 订单id
 * @param {number|string} couponCount - 优惠券个数
 * @param {number} price - 订单支付金额
 * @param {string} userName - 客户名
 * @param {function} href - 点击进去详情事件
 * @param {function} callMe - 点击联系客户事件
 */
import React, { Component } from 'react';
import {
  StyleSheet, Text, View
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

export default class CardWoucherCard extends Component {
  render() {
    // Props
    // const {
    //   imgList, orderId, couponCount, price, userName, href, callMe
    // } = this.props;
    return (
      <View>
        <View style={styles.cardWrap}>
          <View style={styles.cardTitle}>
            <Text style={styles.orderId}>订单号: ASG123101111</Text>
            <Text style={styles.orderStatus}>已使用</Text>
          </View>
          <LinearGradient
            start={{ x: 1, y: 0 }}
            end={{ x: 0.1, y: 0.65 }}
            colors={['#46bfdd', '#1a77be']}
            style={styles.linearGradient}
          >
            <View style={styles.contentWrap}>
              <View style={styles.contentTitle}>
                <View style={styles.contentTitleNumber}>
                  <Text style={styles.count}><Text style={styles.priceSymbol}>¥</Text>11</Text>
                  <Text style={styles.name}>电子券</Text>
                </View>
                <View style={styles.contentTitleDes}>
                  <Text style={styles.contentTitleDesTitle}>大连维尔特健身(中山区店)</Text>
                  <Text style={styles.contentTitleDesNumber}>x10张</Text>
                </View>
              </View>
              <View style={styles.contentSubTitle}>
                <Text>已优惠<Text style={styles.fontColorSpe}>0.00</Text>元</Text>
                <Text>共10张券, 在线支付10.00元</Text>
              </View>
            </View>
            <View style={styles.handleWrap}>
              <Text style={styles.handleWrapTitle}>在线支付专享券</Text>
              <View style={styles.handleWrapButtonWrap}>
                <Text style={styles.button}>联系客户</Text>
              </View>
            </View>
          </LinearGradient>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  cardWrap: {
    flex: 1,
  },
  cardTitle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  orderId: {
    lineHeight: 40
  },
  orderStatus: {
    lineHeight: 40
  },
  linearGradient: {
    flex: 1,
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 1,
    borderRadius: 5,
    marginBottom: 30,
  },
  contentWrap: {
    flex: 1,
    backgroundColor: '#fff',
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
    paddingTop: 20,
    paddingLeft: 5,
    paddingRight: 5,
    paddingBottom: 5
  },
  contentTitle: {
    flex: 1,
    flexDirection: 'row'
  },
  contentTitleNumber: {
    width: SCALE(120),
    marginRight: 40,
  },
  priceSymbol: {
    fontSize: 14,
    color: '#f66917'
  },
  count: {
    fontSize: 30,
    color: '#f66917',
    fontWeight: 'bold'
  },
  name: {
    textAlign: 'center',
    fontSize: 20,
    color: '#f66917'
  },
  contentTitleDes: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: 10
  },
  contentTitleDesTitle: {
    fontSize: 16
  },
  contentTitleDesNumber: {
    marginTop: 8,
    color: '#f66917'
  },
  contentSubTitle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'stretch',
    marginTop: SCALE(30),
    height: SCALE(30)
  },
  handleWrap: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: SCALE(60),
  },
  handleWrapTitle: {
    color: '#fff',
    lineHeight: SCALE(60),
  },
  handleWrapButtonWrap: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  button: {
    height: 20,
    lineHeight: 20,
    paddingLeft: 10,
    paddingRight: 10,
    backgroundColor: '#f66917',
    color: '#fff',
    borderRadius: 10,
  },
  fontColorSpe: {
    color: '#f66917',
  }
});
